<template>
  <Card v-style="'boxstyle_bg_1'" title="最新消息">
    <div class="list" v-AnimateScroll>
      <p style="cursor: pointer;" v-for="(item,index) in list" :key="index" @click="openUrl(item.url)">
        <span>{{item.change_type_text}}</span>
        <span>{{item.created_at}}</span>
      </p>
    </div>
  </Card>
</template>

<script lang="ts" setup>
import { ref, onMounted, toRefs, defineProps, watch } from "vue";
import Card from "@/components/Card";
import { bigDataApi } from "@/api/bigData";
import store from "@/store";
import router from "@/router";
const list = ref([]);
let date = 'day';
const props = defineProps({
  selectdate:{
    type: String,
    default: 'day'
  }
})
const { selectdate } = toRefs(props);

console.log(props)

watch(
  selectdate,
  (e) => {
    // console.log(e)
    date = e;
    getNewsList();
  },
  {
    immediate: true,
  }
);
onMounted(() => {
  // 获取最新消息
  // getNewsList()
});
async function getNewsList() {
  const result = await bigDataApi.messagesList({
    token: store.getters.user.token,
    limit: 50,
    date: date
  });
  const { data } = result
  list.value = data
}
function openUrl(url){
  router.push("/urlLibrary?url=" + url);
}
</script>

<style lang="less" scoped>
.list {
  height: 100%;
  overflow-y: auto;
}
.list p {
  padding: 20px 25px;
  font-size: 14px;

  display: flex;
  justify-content: center;
  flex-direction: column;
  background: #131313;
  border-radius: 5px;
  margin-bottom: 10px;
  span {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
